<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue3响应式原理</title>
</head>
<body>
<script>
    // 源数据
    let person = {
        name: '张三',
        age: 18
    };

    /*let p = {};
    // 模拟Vue2的响应式
    Object.defineProperty(p, 'name', {
        configurable: true,
        // 有人读取name时调用
        get() {
            return person.name;
        },
        // 有人修改name时调用
        set(v) {
            console.log('有人修改了name属性');
            person.name = v;
        }
    });
    Object.defineProperty(p, 'age', {
        // 允许删除该属性
        configurable: true,
        // 有人读取age时调用
        get() {
            return person.age;
        },
        // 有人修改name时调用
        set(v) {
            console.log('有人修改了age属性');
            person.age = v;
        }
    });*/

    const ps = new Proxy(person, {
        /**
         * 有人读取ps身上某个属性时的操作
         * @param target    表示源数据对象person
         * @param p         正在读取的属性名
         * @param receiver  ps代理对象
         */
        get(target, p, receiver) {
            console.log(`正在读取p身上的${p}属性`);
            return Reflect.get(target, p);
        },
        /**
         * 有人修改ps身上某个属性或追加某个属性时调用
         * @param target    表示源数据对象person
         * @param p         正在修改的属性名
         * @param value     修改的值的大小
         * @param receiver  ps代理对象
         */
        set(target, p, value, receiver) {
            console.log(`正在修改p身上的${p}属性`);
            return Reflect.set(target, p, value);
        },
        /**
         * 有人删除ps身上某个属性时调用
         * @param target    表示源数据对象
         * @param p         要删除的属性
         */
        deleteProperty(target, p) {
            console.log(`正在删除ps身上的${p}属性`);
            return Reflect.deleteProperty(target, p);
        }
    });
    // console.dir(ps);
</script>
</body>
</html>